<template>
  <div class="check-box" >
    
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div class="option">
      <el-checkbox-group v-model="checkList" @change="select">
        <el-checkbox v-for="(item, index) in question.options"
                     :disabled="!(item.store===null || item.store>=1)"
                     :label="item.id" class="box">
          <span style="font-size: 20px; font-weight:bold; margin-left:10px">{{item.text}}</span>
          <span class="description">{{showDescription(item.description)}}</span>
          <div style="float: right;">剩余名额：{{item.store===null?'无限额':item.store}}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'CheckBox',
  components: {
    Title,
  },
  data(){
   return {
     
   }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
    checkList: {
      type: Array,
      default: []
    },
  },
  mounted() {
    // this.getCheckBox()
  },
  emits: ['changeCheckBox'],
  methods: {
    select() {
      this.question.answer = this.checkList
      if(this.question.hasOwnProperty("call")){
        this.question.call();
      }
      this.$emit('changeCheckBox', this.question)
    },
    showDescription(description) {
      if(description == '' || description == null) {
        return ''
      }else {
        return '('+description+')'
      }
    }
  },
}
</script>

<style scoped src='../css/checkbox.css'>
  /* @import url('../css/checkbox.css'); */
</style>
